<template>
	<view>
		<view class="u-skeleton">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30">
				<block>
					<view class="u-skeleton-circle u-m-r-20">
						<u-avatar :src="pic" size="120"></u-avatar>
					</view>
					<view class="u-flex-1">
						<view class="u-font-14 u-tips-color u-skeleton-rect">{{ username }}</view>
					</view>
				</block>
				<!-- <view><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view> -->
			</view>
			<view class="u-m-t-20 u-skeleton-rect">
				<!-- <u-cell-group>
					<u-cell-item title="检查更新" @click="onTokenJump('')" :arrow="false"></u-cell-item>
				</u-cell-group> -->
				<!-- <u-cell-group>
					<u-cell-item title="隐私政策" @click="showAgreement = true" :arrow="false"></u-cell-item>
				</u-cell-group> -->
				<u-cell-group>
					<u-cell-item title="清除缓存" @click="onTokenJump('')" :arrow="false"></u-cell-item>
				</u-cell-group>
				<u-cell-group>
					<u-cell-item title="版本号" @click="onTokenJump('')" :arrow="false">1.0.0</u-cell-item>
				</u-cell-group>
				<u-cell-group>
					<u-cell-item title="退出登录" @click="showlogoutTime = true" :arrow="false"></u-cell-item>
				</u-cell-group>
				<!-- <u-cell-group>
					<u-cell-item title="自动刷新时间" @click="showChangeTime = true" :arrow="false">1</u-cell-item>
				</u-cell-group> -->
			</view>
		</view>
		<!--骨架-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<!-- 隐私 -->
		<u-modal v-model="showAgreement" title="隐私政策">
			<scroll-view scroll-y="true" style="height: 400rpx">
				<view class="info-content u-font-14">
					<rich-text :nodes="content"></rich-text>
				</view>
			</scroll-view>
		</u-modal>
		<!-- 自动刷新时间 -->
		<u-modal v-model="showChangeTime" title="自动刷新时间" show-cancel-button>
			<view class="info-content u-font-14">请输入刷新时间，单位为分钟，若设置为0，则不自动刷新</view>
			<view class="u-p-l-30 u-p-r-30 u-m-b-20 u-m-t-20">
				<u-input v-model="value" type="number" :border="true" />
			</view>
		</u-modal>
		<!-- 退出登录 -->
		<u-modal v-model="showlogoutTime" title="退出登录" show-cancel-button @confirm="confirm">
			<view class="info-content u-font-14">是否退出登录？</view>
		</u-modal>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			username: '',
			loading: true,
			pic: '',
			showAgreement: false,
			showChangeTime: false,
			showlogoutTime: false,
			value: '0',
			content:
				'浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。'
		};
	},
	components: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad() {
		console.log(this.$store.state.userInfo);
		this.username = this.$store.state.userInfo.username;
		setTimeout(() => {
			this.loading = false;
		}, 2000);
	},
	methods: {
		...mapMutations(['emptyUserInfo']),
		onTokenJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		confirm() {
			let data = { token: this.$store.state.userInfo.token };

			this.$http
				.get('index/logout', data, {
					load: false
				})
				.then((res) => {
					this.emptyUserInfo();
					uni.reLaunch({
						url: '/pages/login/login'
					});
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}
.user-box {
	background-color: #fff;
}
.info-content {
	text-align: center;
	padding: 20rpx;
}
</style>
